	<!--  D:/project/app/ydz-app-uniapp/static/images/knowledge/japan -->
	<template>
		<view class="pagebody">
			<view class="topbox">
				<NavHeader :type="1"></NavHeader>
				<view class="card">
					<view class="flex-row">
						<img
							style="border-radius: 50%;width: 152rpx;height: 152rpx;border: 8rpx solid #fff;margin-top: -64rpx;"
							:src="$config.baseUrl + hospital.url" mode=""></img>
						<view class="" style="margin-left: 32rpx;">
							<view class="flex-row">
								<view class="color303b39 fz40 fwbold" style="line-height: 48rpx;">
									{{hospital.hospitalName}}
								</view>
							</view>
							<view style="color: #576260;margin-top: 8rpx;">
									{{typename}} {{hospital.hospitalCity}}
							</view>
						</view>
					</view>
					<view class="pos-rel"
						style="background: #F6FAF9;width: 100%;padding: 16rpx;margin-top: 40rpx;border-radius: 24rpx;font-weight: 500;font-size: 28rpx;color: #00977C;line-height: 46rpx;">
						<!-- <image src="../../static/images/knowledge/japan/ys.png" class="pos-abs"
							style="left: 16rpx;top: 26rpx;width: 78rpx;height: 32rpx;" mode=""></image> -->
							
						<image src="../../static/images/knowledge/japan/hosjj.png"
							style="width: 78rpx;height: 32rpx;flex-shrink: 0;    margin-bottom: -5rpx;" mode="">
						</image> {{hospital.introduce}}
							
						
					</view>
					

				</view>
			</view>
			<view class="content">
				<view class="text pos-rel color333 fz36 fwbold">医院介绍
					<view class="botline pos-abs">
					</view>
				</view>
				<view class="context" v-html="hospital.content">

				</view>
				<view class="text pos-rel color333 fz36 fwbold">医院概括
					<view class="botline pos-abs">
					</view>
				</view>
				<view class="context" v-html="hospital.overview">
				
				</view>
				<view class="text pos-rel color333 fz36 fwbold">特色科室
					<view class="botline pos-abs">
					</view>
				</view>
				<view class="context" v-html="hospital.dept">
				
				</view>
				<view class="context">信息来源：{{hospital.sources}}</view>

			</view>
			<consulting></consulting>
			<view class="fwlc bgfff br16 mt16">
				<view class="head flex-row">
					<view class="headtetx ischoose" style="">
						{{hospital.hospitalName}}就医服务流程
						<view class="linebox">
						</view>
					</view>
				</view>
				<view class="lcbox" style="padding: 56rpx 27rpx 0 40rpx;">
					<view class="lcitem pos-rel" v-for="(item,index) in fwlclist" :key="index">
						<view class="pos-abs bgfff" style="width: 32rpx;height: 42rpx;left: -18rpx;top: 0rpx;">
							<view class="justify-center align-center"
								style="width: 32rpx; height: 32rpx;background: rgba(2, 183, 202, 0.10);border-radius: 50%;margin-top: 10rpx;">
								<view class="" style="width: 16rpx; height: 16rpx;background: #00D9B2;border-radius: 50%;">
				
								</view>
							</view>
						</view>
						<view class="fz36 fwbold" style="color: #00977C;">
							<span class="mr16">0{{index+1}}</span> {{item.title}}
						</view>
						<view class="flex-row justify-end">
							<view class="color303b39 fz32"
								style="width: 600rpx;line-height: 48rpx;font-weight: 500;padding: 16rpx 16rpx 16rpx 24rpx;background: #F6FAF9;margin-top: 24rpx;">
								{{item.content}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<consulting></consulting>

			<DoctorList :title="'本院推荐医生'" :doctorlist="doctorlist"></DoctorList>
			<japanfw :type="1"></japanfw>
			<AdvCom :type='2'></AdvCom>
			<japanfw :type="2"></japanfw>
			<AdvCom :type='3'></AdvCom>
			<japanfw :type="3"></japanfw>
			<lyb :title="'留言板'"></lyb>
			<view class="recommend">
				<view class="title" style="">
					<span
						style="font-weight: 800;font-size: 40rpx;color: #303B39;z-index: 99;position: relative;">最新文章</span>
					<view class="pos-abs titleline">
					</view>
				</view>
				<ul class="recomlist">
					<li class="recomli" v-for="(item,index) in newsList" :key="index">
						<view class="leftno" :class="index==0?'noone':index==1?'notwo':index==2?'nothree':'noother'">{{index+1}}</view>
						<view class=" righttext lineclamp2" style="" @click="tonewspage">
							{{item.name}}
						</view>
					</li>
				</ul>
			</view>
			<FixedFoot :typeid="2"></FixedFoot>
		</view>
	</template>

	<script>
		import FixedFoot from '../../layouts/fixedfoot.vue';
		import NavHeader from '../../layouts/navheader.vue';
		import lyb from '../../components/generalcom/lyb.vue';
		import DoctorList from '../../components/generalcom/doctorlist.vue';
		import consulting from '../../components/generalcom/consulting.vue'
		import japanfw from '../../components/generalcom/japanfw.vue';
		import AdvCom from '../../layouts/advcome.vue';
		import { getDicts,getHospitalById,selectNewsList,getDoctorList } from '@/api/api.js';
		
		export default {
			components: {
				FixedFoot,
				DoctorList,
				NavHeader,
				consulting,
				lyb,
				AdvCom,
				japanfw
			},
			onLoad(options) {
				//根据id获取医院详情
				this.getHospitalById(options.id);
				//查询最新新闻
				this.selectNewsList();
				//查询医院下的医生
				this.getDoctorList(options.id)
			},
			data() {
				return {
					hospital:'',
					fwlclist: [{
							title: '患者咨询及提交病历材料',
							content: '含文字病历、住院记录、影像胶片、病理切片等'
						},
						{
							title: '推荐适合患者的医院和医生',
							content: '预约国外权威医生，出具详细的海外就医分析报告'
						},
						{
							title: '撰写中、外文转诊病历',
							content: '根据医院的要求，整理、编辑与翻译材料'
						},
						{
							title: '远程MDT（非必须）',
							content: '部分患者可能需远程MDT，确定有无出国必要'
						},
						{
							title: '预约医生就医',
							content: '获取医院提供的就医邀请函、医生预约信、费用预付单等'
						},
						{
							title: '大使馆面谈，取得签证',
							content: '制定个性化签证方案，辅助准备材料，包括申请加急等'
						},
						{
							title: '机票及住宿预订、行前指导',
							content: '帮患者了解国外就医流程及就诊注意事项，提供入境指导'
						},
						{
							title: '接机，就诊及生活陪同翻译',
							content: '由多年工作经验的医学翻译，提供就医、生活指导及陪同等'
						},
						{
							title: '送机，国内病情随访',
							content: '将就医资料翻译成中文，安排回国后国外医生的定期随访等'
						},
					],
					doctorlist: [],
					typelist:[],
					typename:'',
					newsList:[]
				}
			},
			methods: {
				todocdetail() {
					uni.navigateTo({
						url: '/pages/knowledge/docdetail'
					})
				},
				// 根据id获取医院详情
				getHospitalById(id){
					getHospitalById(id).then(res=>{
						if(200 == res.code){
							this.hospital = res.data
							getDicts('hospital_type').then(res => {
								this.typelist = res.data
								this.typelist.forEach(item=>{
									if(item.dictValue==this.hospital.type){
										this.typename = item.dictLabel
									}
								})
							});
							
						}
					})
				},
				selectNewsList() {
				  let param = {
					"pageNum": 1,
					"pageSize": 5,
					"orderByColumn" : "create_time",
					"isAsc":"desc"
				  }
				   selectNewsList(param).then(response => {
					this.newsList = response.rows
				   })
				},
				getDoctorList(hospitalId) {
					let param = {
						"pageNum": 1,
						"pageSize": 3,
						"orderByColumn" : "create_time",
						"isAsc":"desc",
						"hospitalId":hospitalId
					}
				    getDoctorList(param).then(response => {
						this.doctorlist = response.rows
				   })
				}
			}
		}
		
	</script>

	<style lang="scss" scoped>
		::v-deep .is-input-border {
			height: 90rpx;
			border-radius: 16rpx;
			border: 1rpx solid #D7DDDC;
		}

		::v-deep .uni-input-wrapper {
			font-size: 32rpx;
		}

		::v-deep .uni-easyinput__content-input {
			padding: 0 33rpx;
		}

		::v-deep .u-input__textarea {
			font-size: 32rpx;
			padding: 21rpx 0;
		}

		.pagebody {
			padding-bottom: 136rpx;
			background: #F0F6F5;

			.topbox {
				padding: 20rpx 24rpx;
				height: 400rpx;
				background: linear-gradient(180deg, #00D9B2 0%, rgba(0, 217, 178, 0) 100%);

				.card {
					padding: 27rpx 24rpx 37rpx;
					background: #fff;
					border-radius: 24rpx;
					margin-top: 82rpx;
					box-shadow: 1rpx 6rpx 14rpx -10rpx #01AC8D;
					width: 702rpx;
					z-index: 99;
					position: relative;
				}
			}

			.content {
				margin-top: 42rpx;
				padding: 104rpx 24rpx 43rpx;
				background: #fff;
				border-radius: 24rpx;

				.text {
					margin-bottom: 5rpx;
					z-index: 9;

					.botline {
						bottom: 0;
						left: -8rpx;
						width: 160rpx;
						height: 16rpx;
						background: #00D9B2;
						border-radius: 8rpx;
						opacity: 1;
						z-index: -1;
					}
				}

				.context {
					color: #293347;
					font-size: 36rpx;
					line-height: 72rpx;
					margin-top: 16rpx;
					margin-bottom: 16rpx;
					text-indent: 36rpx;
					::v-deep h2 {
						color: #00977C;
						font-weight: bold;
						line-height: 72rpx;
						font-size: 36rpx;
						margin-top: 24rpx;
						margin-bottom: 24rpx;
						line-height: 60rpx;
					}

					::v-deep h3 {
						color: #303b39;
						font-weight: bold;
						line-height: 72rpx;
						margin-top: 16rpx;
						font-size: 36rpx;
						margin-bottom: 16rpx;
					}

					::v-deep h4 {
						color: #303b39;
						font-weight: bold;
						margin-top: 16rpx;
						line-height: 72rpx;
						font-size: 36rpx;
						margin-bottom: 16rpx;
					}

					::v-deep p {
						color: #303b39;
						font-size: 36rpx;
						line-height: 32rpx;
						line-height: 72rpx;
						margin-top: 16rpx;
						margin-bottom: 16rpx;
					}

					::v-deep a {
						font-size: 36rpx;
						color: #0078ff;
					}
				}
			}

			.fwlc {
				.head {
					height: 110rpx;
					padding: 10rpx 32rpx 0;
					border-bottom: 1px solid #D7DDDC;

					.headtetx {
						font-size: 40rpx;
						display: flex;
						align-items: center;
						height: 100rpx;
						margin-right: 40rpx;
						position: relative;

						.linebox {
							position: absolute;
							bottom: 0;
							width: -webkit-fill-available;
							height: 10rpx;
							background: #00D9B2;
							border-radius: 50rpx;
						}
					}

					.ischoose {
						color: #303B39;
						font-weight: 800;
					}

					.nochoose {
						color: #576260;
						font-weight: 400;
					}
				}

				.lcitem {
					border-left: 1rpx dashed #00D9B2;
					width: 100%;
					padding: 0 0 44rpx 24rpx;

				}
			}

			.mstw {
				border-radius: 32rpx;
				padding: 40rpx 24rpx;
			}
			.recommend {
				border-radius: 24rpx;
				margin-top: 16rpx;
				background: #fff;
				box-sizing: border-box;
				padding: 32rpx 24rpx;

				.title {
					position: relative;
					width: max-content;
					padding: 0 16rpx;

					.titleline {
						bottom: 0;
						left: 0;
						height: 16rpx;
						width: 100%;
						background: #00D9B2;
						border-radius: 50rpx;
						z-index: 1;
					}
				}

				.recomlist .recomli:last-child {
					border-bottom: none;
				}

				.recomlist {
					.recomli {
						padding: 24rpx 0;
						display: flex;
						border-bottom: 1rpx dashed #D7DDDC;

						.leftno {
							width: 30rpx;
							height: 30rpx;
							color: #fff;
							font-weight: bold;
							font-size: 24rpx;
							line-height: 30rpx;
							text-align: center;
							border-radius: 6rpx;
							flex-shrink: 0;
							margin-top: 13rpx;
							margin-right: 18rpx;
						}

						.righttext {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 36rpx;
							color: #303B39;
							line-height: 56rpx;
							text-align: left;
						}

						.noone {
							background: linear-gradient(357deg, #FC1C12 0%, #FD6F23 100%);
						}

						.notwo {
							background: linear-gradient(357deg, #FC4A14 0%, #FF9F1B 100%);
						}

						.nothree {
							background: linear-gradient(357deg, #FB7511 0%, #FECA18 100%);
						}

						.noother {
							background: #A4AFAD;
						}

					}
				}
			}

		}
	</style>